<template>
	<view class="storeInformation">
		<picker @change="change" v-if="data.isEdit" :range="[{n:'个人',id:'1'},{n:'机构',id:'2'}]" range-key="n">
			<view class="view">
				已选主体
				<text>{{data.num == 1?'个人':'机构'}}</text>
			</view>
		</picker>
		<view class="view" v-else>
			已选主体
			<text>{{data.num == 1?'个人':'机构'}}</text>
		</view>
		<view class="top">

			<text>基础信息</text>
			<view class="base">
				<view class="logo">
					店铺logo
					<view v-if="!data.obj.logFileId" @tap="uploadLogo" class="image">
						<image src="/static/img/index/53.png" mode="widthFix"></image>
						上传图片
					</view>
					<image @tap="uploadLogo" v-else :src="data.httpUrl+'/app/file/viewFile?fileId='+data.obj.logFileId"
						mode="aspectFill">
					</image>
				</view>
				<view class="input">
					店铺名称
					<input v-model="data.obj.storeName" type="text" placeholder="请输入" />
				</view>
				<view class="input">
					联系电话
					<input v-model="data.obj.linkPhone" type="number" placeholder="请输入" />
				</view>
				<view class="select" @click="handeAddress">
					店铺地址
					<view class="">
						<text class="ellipsis_1" style="flex:1;color: #BFBFBF;"
							:style="data.obj.addressDetail?'color:#262626;':''">{{data.obj.addressDetail || '请选择'}}</text>
						<image src="/static/img/index/25.png" mode="widthFix"></image>
					</view>
				</view>
				<view class="select" @click="navTo('/pages/industry/index?id='+data.obj.industry.id)">
					行业类目
					<view class="" :style="data.obj.industry.name?'color:#262626;':''">
						{{data.obj.industry.name || '请选择'}}
						<image src="/static/img/index/25.png" mode="widthFix"></image>
					</view>
				</view>
				<view v-if="!data.isEdit " class="select" @tap="data.show = true">
					营业时间
					<view class="" :style="(data.obj.workDays.length) || (data.obj.timeEnd)?'color:#262626;':''">
						{{data.weekArr.filter((item,index)=>data.obj.workDays.indexOf(index+1) != -1).join(',')}}
						{{data.obj.timeStart?data.obj.timeStart+'-':''}} {{data.obj.timeEnd}}
						{{!data.obj.timeStart?'请选择':''}}
						<image src="/static/img/index/25.png" mode="widthFix"></image>
					</view>
				</view>
				<view class="input">
					客服电话
					<input v-model="data.obj.servicePhone" type="number" placeholder=" 不填默认为联系电话" />
				</view>
				<view class="input">
					店铺介绍
					<input v-model="data.obj.storeDesc" type="text" placeholder="(选填)可简短向顾客介绍产铺信息" />
				</view>
				<view class="input" v-if="data.num == 2">
					备注
					<input v-model="data.obj.remark" type="text" placeholder="请输入资质备注" />
				</view>
			</view>
			<text>认证资料</text>
			<!-- v-if="(data.obj.certFrontFile && data.obj.certBackFile) || data.num == 2" -->
			<view class="authentication">
				身份证
				<view class="imgs">

					<view class="" @tap="idCart(1)">
						<image v-if="!data.obj.certFrontFile" src="/static/img/index/54.png" mode="widthFix"></image>
						<image v-else :src="data.httpUrl+'/app/file/viewFile?fileId='+data.obj.certFrontFile"
							mode="aspectFill"></image>
						身份证人像面
					</view>

					<view class="" @tap="idCart(2)">
						<image v-if="!data.obj.certBackFile" src="/static/img/index/55.png" mode="widthFix"></image>
						<image v-else :src="data.httpUrl+'/app/file/viewFile?fileId='+data.obj.certBackFile"
							mode="aspectFill"></image>
						身份证国徽面
					</view>
				</view>
			</view>
			<view class="businessLicense" v-if="data.num == 2">
				营业执照({{data.obj.licenceFile?1:0}}/1)
				<view class="img" @tap="handeLicenceFile">
					<image v-if="!data.obj.licenceFile" src="/static/img/index/56.png" mode="widthFix"></image>
					<image class="imgg" v-else :src="data.httpUrl+'/app/file/viewFile?fileId='+data.obj.licenceFile"
						mode="aspectFill"></image>
				</view>
			</view>
			<view class="relatedQualifications" v-if="data.num == 2">
				<text>相关资质({{data.obj.otherLicence.length || 0}}/20),如健康证卫生许可证人力资源服务许可证等</text>
				<view class="list">
					<view class="listItem" v-for="(item,index) in data.obj.otherLicence || []" :key="index">
						<image :src="data.httpUrl+'/app/file/viewFile?fileId='+item" mode="aspectFill"></image>
					</view>
					<view @click="handeOtherLicence" class="img">
						<image src="/static/img/index/53.png" mode="widthFix"></image>
						上传图片
					</view>
				</view>

			</view>
		</view>
		<view class="bot">
			<view class="botTop" @tap="data.bool = !data.bool">
				<image :src="data.bool?'/static/img/index/49.png':'/static/img/index/52.png'" mode="widthFix"></image>
				我已阅读并同意签署<text @tap.stop="navTo1">《开店协议》</text>
			</view>
			<view @tap="submit" class="botSubmit">
				提交审核
			</view>
		</view>
		<u-popup zIndex="1" round="20" mode="bottom" :show="data.show" @close="()=>{data.show = false}">
			<view class="popupMian">
				<view class="popupTop">
					<text @tap="data.show = false">取消</text>
					营业时间
					<text @tap="submit1">确定</text>
				</view>
				<view class="popupTop1">
					<text @tap="handeClick(index)" :class="data.activeList.indexOf(index+1) != -1?'active':''"
						v-for="(item,index) in data.weekArr" :key="index">{{item}}</text>
				</view>
				<tpf-time-range ref="time" startTime="00:00" startDefaultTime="06:00" endTime="23:59"
					endDefaultTime="08:00">
				</tpf-time-range>
			</view>

		</u-popup>
	</view>
</template>

<script setup lang="ts">
	import imgUpload from '@/utils/imgUpload.ts'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import { reactive, ref } from 'vue';
	import { applyStore, myStoreDetail, updateLicence, auditDetail } from '@/utils/api/shop'
	import { queryAgreement, userAuthentication } from '@/utils/api/index'
	import { setDialogView } from '@/utils/dialogView.ts'
	const navTo = (url : string) => {
		uni.navigateTo({
			url
		})
	}
	const time = ref();
	const data = reactive<any>({
		num: '',
		bool: false,
		httpUrl: getApp().globalData.baseUrl,
		logo: {},
		isEdit: false,
		weekArr: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日'],
		obj: { workDays: [], industry: { name: '', id: '' }, longitude: '', latitude: '', addressDetail: "", otherLicence: [] },
		agreementId: '',
		activeList: []
	})
	queryAgreement({ data: { agreementType: 'STORE' } }).then((res) => {
		data.agreementId = res.data[0].id;
	})
	const handeClick = (index : number) => {
		const index1 = data.activeList.indexOf(index + 1);
		if (index1 == -1) {
			data.activeList.push(index + 1)
			return;
		}
		data.activeList.splice(index1, 1)
	}
	const submit1 = () => {
		data.obj.workDays = JSON.parse(JSON.stringify(data.activeList))
		data.obj.timeStart = '';
		data.obj.timeEnd = '';
		time.value.startDefaultTimeArr.map((item : number) => {
			let i = item < 10 ? '0' + item : item;
			data.obj['timeStart'] += data.obj['timeStart'] ? i : i + ":"
		})
		time.value.endDefaultTimeArr.map((item : number) => {
			let i = item < 10 ? '0' + item : item;
			data.obj['timeEnd'] += data.obj['timeEnd'] ? i : i + ":"
		})
		data.show = false;
	}
	const handeAddress = () => {
		uni.chooseLocation({
			success: (e) => {
				data.obj.longitude = e.longitude;
				data.obj.latitude = e.latitude;
				data.obj.addressDetail = e.address;
			},
		})
	}
	const navTo1 = () => {
		uni.navigateTo({
			url: '/pages/my/serviceAgreement?agreementId=' + data.agreementId
		})
	}
	const handeLicenceFile = () => {
		uni.showActionSheet({
			itemList: ['拍摄', '从相册选择'],
			success: (e) => {
				let key = ''
				if (e.tapIndex == 0) {
					key = 'camera'
				} else {
					key = 'album'
				}
				setDialogView(key == 'camera' ? 'CAMERA' : 'READ_EXTERNAL_STORAGE').then(res => {
					if (res == 1) {
						uni.chooseImage({
							count: 1,
							sourceType: [key],
							success: (e) => {
								imgUpload([{ filePath: e.tempFiles[0].path }], (e : any) => {
									data.obj.licenceFile = e[0].fileId;
								})

							}
						})
					}
				})

			}
		})

	}
	const handeOtherLicence = () => {
		uni.showActionSheet({
			itemList: ['拍摄', '从相册选择'],
			success: (e) => {
				let key = ''
				if (e.tapIndex == 0) {
					key = 'camera'
				} else {
					key = 'album'
				}
				setDialogView(key == 'camera' ? 'CAMERA' : 'READ_EXTERNAL_STORAGE').then(res => {
					if (res == 1) {
						uni.chooseImage({
							count: 20,
							sourceType: [key],
							success: (e : any) => {
								imgUpload(e.tempFiles.map((item : any) => { return { ...item, filePath: item.path } }), (e : any) => {
									data.obj.otherLicence = e.map((item : any) => { return item.fileId });
								})

							}
						})
					}
				})

			}
		})

	}
	const uploadLogo = () => {
		uni.showActionSheet({
			itemList: ['拍摄', '从相册选择'],
			success: (e) => {
				let key = ''
				if (e.tapIndex == 0) {
					key = 'camera'
				} else {
					key = 'album'
				}
				setDialogView(key == 'camera' ? 'CAMERA' : 'READ_EXTERNAL_STORAGE').then(res => {
					if (res == 1) {
						uni.chooseImage({
							count: 1,
							sourceType: [key],
							success: (e) => {
								imgUpload([{ filePath: e.tempFiles[0].path }], (e : any) => {
									data.obj.logFileId = e[0].fileId;
								})

							}
						})
					}
				})

			}
		})

	}
	const submit = () => {
		let str : string = ''
		if (!data.obj.logFileId) {
			str = '请上传店铺logo'
		}
		if (!data.obj.storeName) {
			str = str || '请输入店铺名称'
		}
		if (!data.obj.linkPhone) {
			str = str || '请输入联系电话'
		}
		if (!data.obj.addressDetail) {
			str = str || '请选择店铺地址'
		}

		if (data.obj.industry && !data.obj.industry.name) {
			str = str || '请选择行业类目'
		}
		if (!data.isEdit && !data.obj.timeStart) {
			str = str || '请选择营业时间'
		}
		if (!data.obj.certFrontFile) {
			str = str || '请上传身份证人像面'
		}
		if (!data.obj.certBackFile) {
			str = str || '请上传身份证国徽面'
		}
		if (data.num == '2') {
			if (!data.obj.licenceFile) {
				str = str || '请上传营业执照'
			}
			// if (!data.obj.otherLicence.length) {
			// 	str = str || '请上传相关资质'
			// }
		}
		if (!data.bool) {
			str = str || '请阅读并勾选开店协议'
		}

		if (str) {
			uni.showToast({
				title: str,
				mask: true,
				icon: 'none'
			})
			return;
		}
		uni.showLoading({
			title: '加载中...',
			mask: true
		})
		console.log({ ...data.obj, mainType: data.num == '1' ? 'PERSONAL' : 'COMPANY', industryId: data.obj.industry.id })
		const b = data.isEdit ? updateLicence : applyStore;
		b({ data: { ...data.obj, mainType: data.num == '1' ? 'PERSONAL' : 'COMPANY', industryId: data.obj.industry.id } }).then((res) => {
			if (res.code == 200) {
				uni.showToast({
					title: '已提交!',
					icon: 'none',
					mask: true
				})
				setTimeout(() => {
					uni.redirectTo({
						url: '/pages/findingAudit/index'
					})
				}, 1000)
			} else {
				uni.showToast({
					title: res.msg,
					icon: 'none',
					mask: true
				})
			}
		}).catch((res) => {
			if (res.code == 40088) {
				uni.navigateTo({
					url: '/pages/identityAuthentication/index'
				})
			}
		})
	}
	const idCart = (i : number) => {
		// if(data.num == 1){
		// 	return;
		// }
		setDialogView('CAMERA').then(res => {
			if (res == 1) {
				uni.chooseImage({
					count: 1,
					sourceType: ['camera'],
					success: (e) => {
						imgUpload([{ filePath: e.tempFiles[0].path }], (e : any) => {
							if (i == 1) {
								data.obj.certFrontFile = e[0].fileId
							} else {
								data.obj.certBackFile = e[0].fileId
							}
						})

					}
				})
			}
		})

	}
	const change = (e) => {
		data.num = e.detail.value ? '2' : '1'
	}
	onLoad((option) => {
		if (option.isEdit) {
			data.isEdit = true;
			if (option.isAuthentication) {
				auditDetail({ data: { applyId: option.id } }).then((res) => {
					res.data.otherLicence = JSON.parse(res.data.otherLicence)
					data.obj = res.data;
					data.num = res.data.mainType.value == 'PERSONAL' ? '1' : '2';
					data.obj.industry = { id: res.data.industryId, name: res.data.industryName }
				})
			} else {
				myStoreDetail().then((res) => {
					res.data.storeInfoDetail.workDays = []
					res.data.storeInfoDetail.otherLicence = JSON.parse(res.data.storeInfoDetail.otherLicence)
					data.obj = res.data.storeInfoDetail;
					data.num = res.data.storeInfoDetail.mainType.value == 'PERSONAL' ? '1' : '2';
					data.obj.industry = { id: res.data.storeInfoDetail.industryId, name: res.data.storeInfoDetail.industryName }
					data.obj.storeId = data.obj.id

				})
			}

			return;
		} else {
			userAuthentication().then((res) => {
				data.obj.certFrontFile = res.data.certFileFront
				data.obj.certBackFile = res.data.certFileBack
			})
		}
		data.num = option.num;
	})
	uni.$off('storeInformation');
	uni.$on('storeInformation', (item : any) => {
		data.obj.industry = item;
	})
	uni.$off('onIdentityAuthentication');
	uni.$on('onIdentityAuthentication', (e) => {
		console.log(e, 'eee')
		if (data.num == 1) {
			//个人
			data.obj.certFrontFile = e.certFrontFile;
			data.obj.certBackFile = e.certBackFile;
		}
	})
</script>

<style lang="scss" scoped>
	.popupMian {
		padding: 36rpx;

		.popupTop {
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-weight: bold;

			text {
				font-weight: 500;
				font-size: 32rpx;
			}

			text:nth-of-type(1) {
				color: #757575;
			}

			text:nth-of-type(2) {
				color: #6B64D3;
			}
		}

		.popupTop1 {
			display: flex;
			margin-bottom: 30rpx;
			flex-wrap: wrap;

			text {
				line-height: 66rpx;
				width: 24%;
				margin-right: 1.33333%;
				margin-top: 32rpx;
				text-align: center;
				border-radius: 12rpx;
				font-weight: bold;
				background: #F4F6FA;
			}

			text:nth-of-type(4n) {
				margin-right: 0;
			}

			.active {
				color: #6B64D3;
				background: #E4E2FC;
			}
		}
	}

	.view {
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: #fff;
		border-radius: 24rpx;
		padding: 27rpx 32rpx;
		margin: 24rpx 24rpx 0 24rpx;
		font-size: 28rpx;
		color: #595959;

		text {
			font-size: 32rpx;
			color: #262626;
		}
	}

	.businessLicense {
		margin-top: 20rpx;
		border-radius: 24rpx;
		background: #fff;
		padding: 24rpx 32rpx;
		color: #595959;

		.imgg {
			width: 90% !important;
			height: 200rpx;

		}

		.img {
			padding: 16rpx 0;
			display: flex;
			justify-content: center;
			border-radius: 32rpx;
			border: 1rpx solid #F4F6FA;
			margin-top: 16rpx;

			image {
				width: 300rpx;
			}
		}
	}

	.relatedQualifications {
		margin-top: 20rpx;
		border-radius: 24rpx;
		background: #fff;
		padding: 24rpx 32rpx;

		>text {
			display: inline-block;
			color: #595959;
			margin-bottom: 16rpx;
		}

		.list {
			display: flex;
			flex-wrap: wrap;

			>view {
				width: 32%;
				margin-right: 2%;
				margin-bottom: 20rpx;
			}

			>view:nth-of-type(3n) {
				margin-right: 0;
			}
		}

		.listItem {
			image {
				width: 100%;
				height: 200rpx;
				border-radius: 10rpx;
			}
		}


		.img {
			width: 100%;
			height: 200rpx;
			border-radius: 12rpx;
			background: #F4F6FA;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			image {
				width: 72rpx;
				margin-bottom: 12rpx;
			}

			font-size: 24rpx;
			color: #C4C4C4;
		}
	}

	.top {
		flex: 1;
		overflow: auto;
		padding: 0 24rpx 0 24rpx;

		>text {
			font-size: 28rpx;
			color: #8C8C8C;
			margin-top: 32rpx;
			display: inline-block;
		}

		.base {
			margin-top: 20rpx;
			border-radius: 24rpx;
			background: #fff;
			padding: 24rpx 32rpx;

			.logo {
				display: flex;
				flex-direction: column;
				font-size: 28rpx;
				color: #595959;

				.image {
					width: 200rpx;
					height: 200rpx;
					margin-bottom: 28rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					border-radius: 12rpx;
					background: #F4F6FA;
					margin-top: 12rpx;
					justify-content: center;

					image {
						margin-bottom: 12rpx;
						width: 72rpx;
					}

					color: #C4C4C4;
				}

				>image {
					margin-top: 12rpx;
					width: 200rpx;
					height: 200rpx;
					margin-bottom: 28rpx;
					border-radius: 12rpx;
				}
			}

			.select {
				display: flex;
				align-items: center;

				view {
					height: 90rpx;
					flex: 1;
					display: flex;
					margin-left: 48rpx;
					align-items: center;
					justify-content: space-between;

					image {
						width: 25rpx;
					}

					font-size: 28rpx;
					color: #BFBFBF;
				}
			}

			.input {
				display: flex;
				align-items: center;
				font-size: 28rpx;
				color: #595959;

				input {
					flex: 1;
					height: 90rpx;
					margin-left: 48rpx;
				}
			}
		}

		.authentication {
			margin-top: 20rpx;
			border-radius: 24rpx;
			background: #fff;
			padding: 24rpx 32rpx;
			color: #595959;

			.imgs {
				margin-top: 16rpx;
				display: flex;
				justify-content: space-between;

				view {
					width: 300rpx;

					image {
						margin-bottom: 8rpx;
						width: 100%;
						height: 180rpx;
						border-radius: 8rpx;
					}

					font-size: 24rpx;
					color: #8C8C8C;
				}
			}
		}
	}

	.bot {
		padding: 16rpx 56rpx;
		background: #fff;
		margin-top: 58rpx;

		.botTop {
			display: flex;
			align-items: center;
			justify-content: center;

			image {
				width: 36rpx;
				margin-right: 12rpx;
			}

			font-size: 24rpx;
			color: #8C8C8C;

			text {
				font-size: 24rpx;
				color: #6B64D3;
			}
		}

		.botSubmit {
			line-height: 88rpx;
			border-radius: 88rpx;
			text-align: center;
			margin-top: 24rpx;
			background: #6B64D3;
			color: #fff;
			font-size: 32rpx;
		}
	}

	.storeInformation {
		height: 100vh;
		background: #F4F6FA;
		display: flex;
		flex-direction: column;
	}
</style>